<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .hour {
        color: red;
      }

      .min {
        color: green;
      }

      .sec {
        color: blue;
      }
    </style>
  </head>
  <body>
    <div id="clock">
      <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec"
        >ss</span
      >
      <button onclick="clockStart()">开始</button>
      <button onclick="clockStop()">停止</button>
    </div>

    <script>
      let timerId;

      function update() {
        let clock = document.getElementById("clock");
        const date = new Date();
        let hour = date.getHours().toString().padStart(2, 0);
        clock.children[0].innerHTML = hour;

        let min = date.getMinutes().toString().padStart(2, 0);
        clock.children[1].innerHTML = min;

        let sec = date.getSeconds().toString().padStart(2, 0);
        clock.children[2].innerHTML = sec;
      }

      function clockStart() {
        if (!timerId) {
          timerId = setInterval(update, 1e3);
        }
        update();
      }

      function clockStop() {
        clearInterval(timerId);
        timerId = null;
      }
    </script>
  </body>
</html>
